<template>
  <div class="wrap">
    <!-- 轮播图 -->
    <div @mouseover="mouseOver" @mouseleave="mouseLeave" >
      <swiper class="swiper" :options="swiperOption" v-if="banner.length > 1" >
        <swiper-slide v-for="(item,index) in banner" :key="index">
          <img class="swiper-img" :src="item.url" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev" v-show="showArrow"></div>
        <div class="swiper-button-next swiper-button-white" slot="button-next" v-show="showArrow"></div>
      </swiper>
    </div>
    <!-- 网红主播涨粉、带货管理、一站式解决方案 -->
    <div class="scheme-box">
      <p class="scheme-title">网红主播涨粉、带货管理、一站式解决方案</p>
      <p class="scheme-sub-title">这些工具助你成为顶流</p>
      <div class="scheme-item-box">
        <div class="scheme-item" v-for="(item,index) in schemelist" :key="index" @mouseover="mouseOverScheme(index)" @mouseleave="mouseLeaveScheme(index)" >
          <img class="scheme-item-img" :src="item.imgurl" />
          <p class="scheme-item-name">{{item.name}}</p>
          <p class="scheme-item-msg">{{item.msg}}</p>
          <!-- hover时显示 -->
          <div class="scheme-item-hover" v-show="schemeHoverIndex === index">
            <p class="scheme-item-hover-name">{{item.name}}</p>
            <p class="scheme-item-hover-msg">{{item.msg}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 大数据下的网红影响力价值分析系统 -->
    <div class="analyze" id="analyze">
      <p class="analyze-title">大数据下的网红影响力价值分析系统</p>
      <img class="analyze-gif-img" src="~assets/images/home-analyze-bg.png" v-if="analyzeIndex === -1"/>
      <div class="analyze-gif">
        <img class="analyze-gif-img" v-for="(item,index) in analyzelist" :key="index" :src="item.imgurl" v-show="analyzeIndex === index"/>
      </div>
    </div>

    <!-- 伙达选货优势 -->
    <div class="adv-box">
      <p class="adv-title">伙达选货优势</p>
      <p class="adv-sub-title">为你节约找货时间，专注爆红内容创作</p>
      <div class="adv-v">
        <img class="adv-v-img" src="~assets/images/home-v.png" />
        <p class="adv-v-text">厂家直供 一件代发</p>
      </div>
      <div class="adv-item-box">
        <div class="adv-item" v-for="(item,index) in advlist" :key="index">
          <div class="adv-item-bg" :style="{background: 'url(' + item.imgbg + ')' + 'no-repeat'}">
            <img class="adv-item-img" :src="item.imgitem"/>
          </div>
          <p :class="'adv-item-' + index ">{{item.name}}</p>
          <p class="adv-item-text">{{item.text1}}</p>
          <p class="adv-item-text2">{{item.text2}}</p>
        </div>
      </div>
    </div>

     <!-- “直播全流程”专业支撑 -->
    <div class="flow">
      <p class="flow-title">“直播全流程”专业支撑</p>
      <p class="flow-sub-title">运营团队经验丰富 打造高标准带货体验</p>
      <div class="flow-box">
        <div class="flow-item" :style="{background: 'url(' + item.bgimg + ')' + 'no-repeat'}" v-for="(item,index) in flowlist" :key="index" @mouseover="mouseOverFlow(index)" @mouseleave="mouseLeaveFlow(index)">
          <div class="floe-item-num">
            <p class="floe-item-num-text">{{item.id}}</p>
            <div class="flow-item-num-line"></div>
          </div>
          <p class="flow-item-name">{{item.name}}</p>
          <!-- hover时显示 -->
          <div class="flow-item-hover" v-show="flowHoverIndex === index">
            <div class="flow-hover-num-box">
              <div class="flow-hover-num">
                <p class="flow-hover-num-text">{{item.id}}</p>
                <div class="flow-hover-num-line"></div>
              </div>
              <p class="flow-hover-name">{{item.name}}</p>
            </div>
            <p class="flow-hover-msg">{{item.msg}}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 合作爆品案例 -->
    <div class="case-box">
      <p class="case-title">合作爆品案例</p>
      <div class="case-item" v-for="(item,index) in caselist" :key="index" :id="item.caseId">
         <!-- 背景在左边 -->
        <transition name="case-bg">
          <img class="case-item-bg" :src="item.bgurl" v-if="index%2 == 0 && item.show"/>
        </transition>
        <transition name="case-img">
          <img class="case-item-img" :src="item.imgurl" v-if="index%2 == 0 && item.show"/>
        </transition>
        <!-- 背景在右边 -->
        <transition name="case-bg2">
          <img class="case-item-bg2" :src="item.bgurl" v-if="index%2 == 1 && item.show"/>
        </transition>
        <transition name="case-img2">
          <img class="case-item-img2" :src="item.imgurl" v-if="index%2 == 1 && item.show"/>
        </transition>
      </div>
      <div class="more">
        更多案例 >
      </div>
    </div>
    <!-- 浏览器右侧二维码固定定位 -->
    <div class="fixed " v-show="scanBarFixed">
      <div class="return-top" :class="show ? 'active' :''"   @mouseenter="enter()" @mouseleave="leave()" @click="returnTop()">
        <p>返回 <br>
          顶部
        </p>
      </div>
      <div class="scan-img" :class="flag ? '' : 'active-img'"   @mouseenter="enter1()" @mouseleave="leave1()">
      </div>
      <div class="big-scan-img-wrap" v-show="!flag">
          <div class="big-scan-img">
            <img src="../assets/images/big-scan.png">
          </div>
          <p class="sacn-refer">扫码咨询</p>
      </div>
    </div>
  </div>
</template>
<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'

export default {
  data() {
    return {
      banner:[
        {url:require('../assets/images/banner-1.png')},
        {url:require('../assets/images/banner-2.png')},
      ],
      showArrow:false,
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          bulletClass: 'my-bullet',// 一般
          bulletActiveClass: 'my-bullet-active',// 选中
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        //自动轮播
        autoplay: {
          delay: 5000,
          //当用户滑动图片后继续自动轮播
          disableOnInteraction: false,
        },
      },
      schemelist:[
        {
          imgurl:require('../assets/images/home-scheme-0.png'),
          name:'连麦涨粉',
          msg:'找到与你最佳匹配的网红主播，与ta连麦，涨粉导流双赢，共同发掘粉丝购买力。',
        },
        {
          imgurl:require('../assets/images/home-scheme-1.png'),
          name:'粉丝动态',
          msg:'查看每日每时粉丝数量变化，把握粉丝增长爆点，定位分析掉粉原因，突破百万粉丝瓶颈。',
        },
        {
          imgurl:require('../assets/images/home-scheme-2.png'),
          name:'多平台管理',
          msg:'打通快手、抖音等各大直播带货平台商品系统，一键管理全部平台上货库存订单。',
        },
        {
          imgurl:require('../assets/images/home-scheme-3.png'),
          name:'选货大厅',
          msg:'海量商品工厂源头价，每日上新。提供精美商品图片，丰富的宣传信息，现成直播脚本。',
        },
      ],
      schemeHoverIndex:-1,// hover时的index
      analyzelist:[
        {imgurl: require('../assets/images/home-analyze-1.png')},
        {imgurl: require('../assets/images/home-analyze-2.png')},
        {imgurl: require('../assets/images/home-analyze-3.png')},
        {imgurl: require('../assets/images/home-analyze-4.png')},
        {imgurl: require('../assets/images/home-analyze-5.png')},
        {imgurl: require('../assets/images/home-analyze-6.png')},
        {imgurl: require('../assets/images/home-analyze-7.png')},
        {imgurl: require('../assets/images/home-analyze-8.png')},
      ],
      analyzeIndex: -1,
      analyzetimer: null, // 定时器
      advlist:[
        {
          imgbg:require('../assets/images/home-adv-bg-1.png'),
          imgitem:require('../assets/images/home-adv-1.png'),
          name:'值',
          text1:'提升私域流量价值',
          text2:'激发主播带货潜力',
        },
        {
          imgbg:require('../assets/images/home-adv-bg-2.png'),
          imgitem:require('../assets/images/home-adv-2.png'),
          name:'货',
          text1:'打造主播自有供应链',
          text2:'释放超额盈利空间',
        },
        {
          imgbg:require('../assets/images/home-adv-bg-3.png'),
          imgitem:require('../assets/images/home-adv-3.png'),
          name:'价',
          text1:'没有中间商赚差价',
          text2:'源头产品直达粉丝',
        },
      ],
      flowlist: [
        {
          id:'01',
          name:'平台品控',
          msg:'定位粉丝人群，给出精准选品推荐，寄样对接实时跟踪。',
          bgimg: require('../assets/images/home-flow-item-bg.png'),
        },
        {
          id:'02',
          name:'活动策划',
          msg:'针对带货商品，设计多种营销玩法，提高粉丝全场互动。',
          bgimg: require('../assets/images/home-flow-item-bg.png'),
        },
        {
          id:'03',
          name:'运营跟播',
          msg:'直播进行期间，全程跟播录屏、互动、粉丝维护、数据监控。',
          bgimg: require('../assets/images/home-flow-item-bg.png'),

        },
        {
          id:'04',
          name:'结案报告',
          msg:'总结整场直播活动，包括选品、策划、直播、数据转化分析。',
          bgimg: require('../assets/images/home-flow-item-bg.png'),

        },
        {
          id:'05',
          name:'售后服务',
          msg:'整体复盘数据转化和粉丝反馈等信息，进一步提供变现方案。',
          bgimg: '',

        },
      ],
      flowHoverIndex:-1,// hover时的index
      caselist: [
        {
          bgurl:require('../assets/images/home-case-bg-1.png'),
          imgurl:require('../assets/images/home-case-item-1.png'),
          show:false,
          caseId:'case0',
        },
        {
          bgurl:require('../assets/images/home-case-bg-2.png'),
          imgurl:require('../assets/images/home-case-item-2.png'),
          show:false,
          caseId:'case1',
        },
        {
          bgurl:require('../assets/images/home-case-bg-3.png'),
          imgurl:require('../assets/images/home-case-item-3.png'),
          show:false,
          caseId:'case2',
        },
        {
          bgurl:require('../assets/images/home-case-bg-4.png'),
          imgurl:require('../assets/images/home-case-item-4.png'),
          show:false,
          caseId:'case3',
        },
      ],
      scanBarFixed:true, //控制浏览器右侧固定定位的显示和隐藏
      flag:true, //控制紫色二维码和灰色二维码的切换
      show:true, //控制箭头和返回顶部的
    };
  },
  async fetch({store}) {
    await store.commit('setIndex', 0)
  },
  layout: 'loginlayouts',
  components: {
    Swiper,
    SwiperSlide,
  },
  created(){
  //  this.$getUser()
    // let userinfo = this.$getUser;
    // if(!userinfo.userid){ //用户不为空
    //   this.$store.commit('user/setUser', {
    //     userid: userinfo.id,
    //     token: userinfo.token,
    //     name: userinfo.username,
    //     auth: true,
    //   });
    // }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll()
      window.addEventListener('scroll', this.scroll)
    })
  },
  beforeDestroy() {
    if (this.analyzetimer) {
      clearInterval(this.analyzetimer)
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scroll, false)
  },
  // watch:{
  //   isScroll:{
  //     immediate: true,
  //     handler() {
  //       this.isScroll();
  //     }
  //   }
  // },
  methods: {
    //轮播图
    mouseOver() {
      this.showArrow = true;
    },
    mouseLeave() {
      this.showArrow = false;
    },
    mouseOverScheme(index) {
      this.schemeHoverIndex = index;
    },
    mouseLeaveScheme(index) {
      this.schemeHoverIndex = -1;
    },
    mouseOverFlow(index) {
      this.flowHoverIndex = index;
    },
    mouseLeaveFlow(index) {
      this.flowHoverIndex = -1;
    },
    async scroll () {
      const scrollTop = document.documentElement.scrollTop;//屏幕滚动距离
      const innerHeight = window.innerHeight;// 浏览器可视区
      //大数据下的网红影响力价值分析系统 动画
      const analyzeOffsetTop = document.getElementById('analyze').offsetTop;
      if (scrollTop + innerHeight > analyzeOffsetTop + 300) {
        this.showgif();
      }
  
      //合作案例
      for (let index = 0; index < this.caselist.length; index++) {
        const caseId = this.caselist[index].caseId;
        const caseOffsetTop = document.getElementById(caseId).offsetTop;
        
        // 第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
        // 第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
        if (scrollTop > caseOffsetTop + 480) { // 向上超出
           this.caselist[index].show = false;
        } else if (scrollTop < caseOffsetTop - innerHeight) {// 还没有出现
          this.caselist[index].show = false;
        } else {// 可视区
          this.caselist[index].show = true;
        }
        // 右侧固定定位
        if(scrollTop > 520){
          this.scanBarFixed = true;
        } else {
          this.scanBarFixed = false;
        }
      }
    },
    //分析系统 动画
    showgif() {
      if ((this.analyzeIndex < this.analyzelist.length-1) && (!this.analyzetimer)) {
        this.analyzetimer = setInterval(() => {
          if (this.analyzeIndex === 6) {
            clearInterval(this.analyzetimer)
          }
          this.analyzeIndex = this.analyzeIndex +1;
        }, 200)
      }
    },
    enter(){ 
      this.show = false;
    },
    leave(){
      this.show = true;
    },
    enter1(){
      this.flag = false;
    },
    leave1(){
      this.flag = true;
    },
    returnTop(){ //返回顶部
      if(!this.show){
        document.documentElement.scrollTop = 0; //返回顶部
        this.scanBarFixed = false; 
      }
    },			
  },
}
</script>
<style scoped>
  .wrap{
    width: 100%;
    background: #fff;
    min-width: 1200px;
    max-width: 1920px;
    margin:0 auto; 
  }
  .swiper {
    width: 100%;
    }
  .swiper-img {
    width: 100%;
  }
  .swiper-pagination{
    /* height: 20px; */
    padding-bottom: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .swiper-pagination /deep/ .my-bullet{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    margin-left: 14px;
    background: #e0e5fe;
    display: block;
  }
  .swiper-pagination /deep/ .my-bullet-active{
    width: 30px;
    height: 10px;
    border-radius: 5px;
    margin-left: 14px;
    display: block;
    background: #ffffff;
  }
  .swiper-button-prev {
    width: 40px;
    height: 70px;
    background: #000;
    opacity: 0.4;
  }
  .swiper-button-next {
    width: 40px;
    height: 70px;
    background: #000;
    opacity: 0.4;
  }
  .scheme-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .scheme-title {
    font-size: 30px;
    color: #000;
    margin-top: 80px;
  }
  .scheme-sub-title {
    font-size: 18px;
    color: #666;
    margin-top: 20px;
  }
  .scheme-item-box {
    width: 1200px;
    margin-top: 100px;
    margin-bottom: 130px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .scheme-item {
    width: 260px;
    height: 320px;
    box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.05);
    border-radius:4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .scheme-item-img {
    width: 84px;
    height: 72px;
    margin-top: 54px;
  }
  .scheme-item-name {
    font-size: 16px;
    color: #333;
    margin-top: 40px;
  }
  .scheme-item-msg {
    width: 196px;
    font-size: 14px;
    color: #999;
    margin-top: 30px;
    line-height:22px;
  }
  .scheme-item-hover {
    width: 300px;
    height: 370px;
    position: absolute;
    top: -25px;
    left: -20px;
    background: #8086ff;
    border-radius:4px;
  }
  .scheme-item-hover-name {
    font-size: 16px;
    color: #fff;
    margin-top: 120px;
    margin-left: 20px;
    display: inline-block;
    height: 42px;
    line-height: 42px;
    border-bottom: 2px #ffeb95 solid;
  }
  .scheme-item-hover-msg {
    font-size: 14px;
    color: #fff;
    margin-top: 25px;
    line-height: 22px;
    padding: 0 20px; 
  }
  .analyze {
    width: 100%;
    position: relative;
  }
  .analyze-title {
    font-size: 30px;
    color: #fff;
    text-align: center;
    padding-top: 60px;
    width: 500px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -250px;
  }
  .analyze-gif {
    width: 100%;
  }
  .analyze-gif-img {
    width: 100%;
  }
  .adv-box {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .adv-title {
    font-size: 30px;
    color: #000;
    margin-top: 80px;
    text-align: center;
  }
  .adv-sub-title {
    font-size: 18px;
    color: #666;
    margin-top: 20px;
    text-align: center;
  }
  .adv-v {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .adv-v-img {
    width: 21px;
    height: 20px;
  }
  .adv-v-text {
    font-size: 18px;
    color: #8086FF;
    margin-left: 10px;
  }
  .adv-item-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    margin-top: 75px;
  }
  .adv-item {
    width: 234px;
  }
  .adv-item-bg {
    width: 234px;
    height: 193px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .adv-item-img {
    width: 140px;
    height: 140px;
  }
  .adv-item-img:hover {
    width: 175px;
    height: 175px;
  }
  .adv-item-0 {
    font-size: 26px;
    color: #07B1FF;
    text-align: center;
  }
  .adv-item-1 {
    font-size: 26px;
    color: #9732EA;
    text-align: center;
  }
  .adv-item-2 {
    font-size: 26px;
    color: #FFA200;
    text-align: center;
  }
  .adv-item-text {
    font-size: 20px;
    color: #333;
    text-align: center;
    line-height:28px; 
    margin-top: 26px;
  }
  .adv-item-text2 {
    font-size: 20px;
    color: #333;
    text-align: center;
    line-height:28px; 
    margin-bottom: 180px;
  }
  .flow {
    width: 100%;
    /* height: 690px; */
    background: url('~assets/images/home-flow-bg.png') no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .flow-title {
    font-size: 30px;
    color: #fff;
    margin-top: 80px;
  }
  .flow-sub-title {
    font-size: 18px;
    color: #fff;
    margin-top: 20px;
  }
  .flow-box {
    display: flex;
    background: #fff;
    margin-top: 80px;
    border-radius: 8px;
    margin-bottom: 100px;
  }
  .flow-item {
    width: 254px;
    height: 360px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .floe-item-num {
    margin-top: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .floe-item-num-text {
    font-size: 40px;
    color: #8086FF;
    z-index: 99;
  }
  .flow-item-num-line {
    width: 42px;
    height: 8px;
    background: #FFEB95;
    border-radius: 4px;
    margin-top: -15px;
  }
  .flow-item-name {
    font-size: 30px;
    color: #8086FF;
    margin-top: 32px;
  }
  .flow-item-hover {
    position: absolute;
    width: 278px;
    height: 396px;
    background: url('~assets/images/home-flow-item-hover.png') no-repeat;
    z-index: 200;
    top: -18px;
    left: -10px;
  }
  .flow-hover-num-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 136px 45px 0 35px;
  }
  .flow-hover-num {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .flow-hover-num-text {
    font-size: 40px;
    color: #fff;
    font-weight: 500;
    z-index: 202;
  }
  .flow-hover-num-line {
    width: 42px;
    height: 9px;
    border-radius: 4.5px;
    background: #FFEB95;
    margin-top: -12px;
    z-index: 201;
  }
  .flow-hover-name {
    font-size: 30px;
    color: #fff;
  }
  .flow-hover-msg {
    margin: 30px 45px 0 35px;
    font-size: 14px;
    color: #fff;
    line-height: 20px;
  }
  .case-box {
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .case-title {
    font-size: 30px;
    color: #000;
    margin-top: 80px;
    text-align: center;
    margin-bottom: 82px;
  }
  .case-item {
    width: 1038px;
    height: 480px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
  }
  .case-item-bg {
    width: 690px;
    height: 480px;
    position: absolute;
    top: 0;
    left: 24px;
  }
  .case-item-img {
    width: 944px;
    height: 400px;
    position: absolute;
    top: 40px;
    right: 24px;
    box-shadow:0px -11px 24px 5px rgba(0, 0, 0, 0.04), 0px 11px 24px 5px rgba(0, 0, 0, 0.04);
  }
  .case-bg-enter {
    left: -690px;
  }
  .case-bg-enter-to {
    left: 24px;
    animation-name: shakebg;
    animation-timing-function: ease-in;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-delay: .3s;
  }
  .case-bg-leave {left: 24px;}
  .case-bg-leave-to {left: -690px;}
  .case-bg-enter-active {transition:all .3s ease;}
  .case-bg-leave-active {transition:all .3s ease .2s;}
  @keyframes shakebg {
    0%  {left: 24px}
    20% {left: 36px;}
    40% {left: 16px;}
    60% {left: 30px;}
    80% {left: 20px;}
    100%{left: 24px;}
  }

  .case-img-enter {right: -944px;}  
  .case-img-enter-to {
    right: 24px;
    animation-name: shakeitem;
    animation-timing-function: ease-in;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-delay: .3s;
  }
  .case-img-leave-to {right: -944px;}
  .case-img-leave {right: 24px;}
  .case-img-enter-active {transition:all .3s ease .2s;}
  .case-img-leave-active {transition:all .3s ease ;}
  @keyframes shakeitem {
    0%  {right: 24px}
    20% {right: 36px;}
    40% {right: 16px;}
    60% {right: 30px;}
    80% {right: 20px;}
    100%{right: 24px;}
  }

  .case-item-bg2 {
    width: 690px;
    height: 480px;
    position: absolute;
    top: 0;
    right: 24px;
  }
  .case-item-img2 {
    width: 944px;
    height: 400px;
    position: absolute;
    top: 40px;
    left: 24px;
  }
  .case-bg2-enter {right: -690px;}
  .case-bg2-enter-to {
    right: 24px;
    animation-name: shakebg2;
    animation-timing-function: ease-in;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-delay: .3s;
  }
  .case-bg2-leave {right: 24px;}
  .case-bg2-leave-to {right: -690px;}
  .case-bg2-enter-active {transition:all .3s ease;}
  .case-bg2-leave-active {transition:all .3s ease .2s;}
  @keyframes shakebg2 {
    0%  {right: 24px}
    20% {right: 36px;}
    40% {right: 16px;}
    60% {right: 30px;}
    80% {right: 20px;}
    100%{right: 24px;}
  }

  .case-img2-enter {
    left: -944px;
  }  
  .case-img2-enter-to {
    left: 24px;
    animation-name: shakeitem2;
    animation-timing-function: ease-in;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-delay: .3s;

  }
  .case-img2-leave-to {
    left: -944px;
  }
  .case-img2-leave {
    left: 24px;
  }
  .case-img2-enter-active {
    transition:all .3s ease .2s;
  }
  .case-img2-leave-active {
    transition:all .3s ease ;
  }
  @keyframes shakeitem2 {
    0%  {left: 24px}
    20% {left: 36px;}
    40% {left: 16px;}
    60% {left: 30px;}
    80% {left: 20px;}
    100%{left: 24px;}
  }
  .more {
    width: 180px;
    height: 48px;
    line-height: 48px;
    border-radius: 24px;
    background: #8086FF;
    font-size: 22px;
    color: #fff;
    text-align: center;
    margin-bottom: 80px;
    margin-top: 40px;
  }
  /* 浏览器右侧固定定位 */
  .fixed{
		width:50px;
		height:100px;
		position:fixed;
		bottom:100px;
		right:2%; 
		z-index:10000;
		cursor:pointer;
  }
  .return-top{
    height:50px;
    width:50px;
    display:flex;
    align-items:center;
    justify-content: center;
    color:#b5b5b5;
    font-size:13px;
    background: #f4f4f4;
  }
  .return-top p{
    line-height:1.3;
  }
  .active{
    font-size:0;
    background:#f4f4f4 url(../assets/images/scan-arrow1.png)  no-repeat center center;
  }
  .scan-img{
    height:50px;
    text-align:center;
    background:#f4f4f4 url(../assets/images/gray-scan.png) no-repeat center center;
  }
  .active-img{
    height:50px;
    text-align:center;
    background:#8086ff url(../assets/images/purple-scan.png) no-repeat center center;
  }
  .big-scan-img-wrap{
    height:151px;
    width:120px;
    padding:14px 10px 12px 10px;
    box-sizing:border-box;
    background:#8086ff;
    position: absolute;
    top:-51px;
    right:60px;
    border-radius:2px;
    text-align: center;
  }
  .big-scan-img{
    width: 101px;
    height: 101px;
  }
  .big-scan-img img{
    width: 100%;
    height: 100%;
  }
  .sacn-refer{
    color:#ffffff;
    font-size: 15px;
    padding-top:10px;
  }
</style>
